<template>
	<div
		id="app"
		:class="routeClass"
		v-loading="fullScreenLoading"
		element-loading-text="正在获取登录状态"
		v-infinite-scroll="infiniteScroll"
		:infinite-scroll-delay="500"
		:infinite-scroll-distance="200"
		:infinite-scroll-immediate="false"
	>
		<router-view/>
	</div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    computed: {
      ...mapState([
        'isLogged',
        'fullScreenLoading'
      ]),
      routeClass() {
        let isLogged = this.isLogged
        let {path} = this.$route
        if (path === '/login' || path === '/register' || path === '/forget') {
          isLogged = false
        }
        return [path.slice(1).split('/').join('-'), isLogged ? '' : 'unlogin']
      }
    },
    methods: {
      infiniteScroll() {
        this.$bus.$emit('infinite-scroll')
      },
    }
  }
</script>

<style lang="less">
	html, body {
		height: 100%;
		width: 100%;
		padding: 0;
		margin: 0;
		overflow: auto;
		font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
	}

	#body {
		.el-dialog__header {
			box-sizing: border-box;
			height: 50px;
			padding: 13px 20px;
			border-bottom: 1px solid #eee;
		}

		.el-dialog__footer {
			height: 50px;
			border-top: 1px solid #eee;
			padding: 10px 20px;
		}
	}

	#app {
		min-height: 100%;
		width: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		&.unlogin {
			background-color: #f0f2f5;
			background-image: url("./assets/bg.svg");
			background-repeat: no-repeat;
			background-size: 100%;
			background-position: center 110px;
		}

		.page__section {
			min-height: 100%;
			overflow: auto;
		}

		.page__header {
			height: 50px;
			line-height: 50px;
			border-bottom: 1px solid #eee;
			padding: 0 16px;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.page__title {
			flex-grow: 1;
			flex-shrink: 1;
			font-size: 16px;
			font-weight: bold;
			color: #222;
			margin: 0;

			& > i {
				margin-right: 8px;
				font-size: 20px;
			}
		}

		.page__main {
			padding: 16px 16px 0;
			box-sizing: border-box;
			background-color: #fff;
		}

		.el-pagination {
			padding: 11px 0;
			text-align: right;
		}

		.operate-bar {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			height: 35px;
			align-items: center;

			.bar-main {
				flex-grow: 1;
				flex-shrink: 1;
			}

			.bar-sub {
				flex-grow: 0;
				flex-shrink: 0;
			}
		}

		.el-input__icon {
			cursor: pointer;
		}

		.card {
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
			border-radius: 6px;
			padding: 20px;
			background-color: #fff;
		}


		.el-form {
			width: 100%;
			max-width: 600px;
		}

		.el-form-item:last-of-type {
			margin-bottom: 0;
		}

		.error {
			color: #F56C6C;
		}

		.success {
			color: #29b9b5;
		}

		.group__input-button {

			.el-input {
				max-width: 360px;

				.el-input__inner {
					border-right: none;
					border-top-right-radius: 0;
					border-bottom-right-radius: 0;
				}
			}

			.el-button {
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
			}
		}

		.el-form-item__label, .el-form-item__content {
			line-height: 30px;
		}
	}

	.search-bar.goods {
		background-color: #fff;
		padding: 16px 20px;

		.el-form {
			width: 100% !important;
			max-width: 100% !important;
		}

		.el-form-item {
			margin-bottom: 10px;

			&:last-of-type {
				margin-bottom: 0;
			}
		}

		.el-radio-button {
			.el-radio-button__inner {
				font-size: 14px;
				border: none !important;
			}

			&.is-active {
				.el-radio-button__inner {
					border-radius: 2px;
				}
			}
		}

		.goods__price {
			display: inline-flex;
			align-items: center;

			.el-input {
				width: 80px;
			}

			.price-split {
				margin: 0 8px;
			}

			.el-button {
				margin-left: 20px;
			}
		}
	}

</style>
